@import "../../assets/scss/core/base";
@import "../../assets/scss/reset";

$jigsaw-scrollbar: #{$jigsaw-prefix}-scrollbar;

.#{$jigsaw-scrollbar} {
    @include inline-block;
    user-select: none;
    transition: background-color .2s linear, opacity .2s linear;
    &:hover, &.#{$jigsaw-scrollbar}-dragging {
        background-color: #eee;
        opacity: .9;
        .#{$jigsaw-scrollbar}-handle {
            background-color: #999;
            opacity: .9;
        }
    }

    &-track {
        position: relative;
        cursor: pointer;
        height: 100%;
    }

    .#{$jigsaw-scrollbar}-handle {
        position: absolute;
        border-radius: 6px;
        background-color: #aaa;
        opacity: .6;
        transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out
    }

    &-horizontal {
        width: 100%;
        height: 15px;

        .#{$jigsaw-scrollbar}-handle {
            left: 0;
            bottom: 2px;
            width: 140px;
            height: 6px;
        }

        &:hover, &.#{$jigsaw-scrollbar}-dragging {
            .#{$jigsaw-scrollbar}-handle {
                height: 11px;
            }
        }
    }

    &-vertical {
        width: 15px;
        height: 100%;

        .#{$jigsaw-scrollbar}-handle {
            top: 0;
            right: 2px;
            width: 6px;
            height: 140px;
        }

        &:hover, &.#{$jigsaw-scrollbar}-dragging {
            .#{$jigsaw-scrollbar}-handle {
                width: 11px;
            }
        }
    }
}


